<template>
  <div class="home">
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <div class="bottom">
        <el-container>
          <div :class="isclose ? 'menubox tuichu':'menubox jinru'"
               ref="menubox">
            <div class="elsidebox"
                 ref="elsidebox">
              <el-aside>
                <div>
                  <HomeAside @changeIsInSchool="changeIsInSchool"
                             :isInSchool="isInSchool"></HomeAside>
                </div>

              </el-aside>

            </div>
            <div class="switchbox">
              <div class="switch"
                   ref="switch"
                   @click="closeMenu"> <i class="el-icon-s-unfold"></i>
              </div>
            </div>

          </div>
          <div class="temp"
               ref="temp">
          </div>
          <div class="mainbox"
               ref="mainbox">
            <el-main>
              <!-- <StdInSch :isInSchool="isInSchool"></StdInSch> -->
              <router-view></router-view>

            </el-main>
          </div>
        </el-container>
      </div>
    </el-container>
  </div>

</template>

<script>
import Header from '../components/Header.vue'
import HomeAside from '@/views/home/HomeAside'

import StdInSch from '@/views/menu/StdInSch'
export default {
  name: 'Home',
  data () {
    return {
      // 是否显示在校学生   false为不在校，true为在校
      isInSchool: false,
      // 是否折叠
      isclose: false,

    }
  },
  mounted () {

  },
  components: {
    "Header": Header,
    "StdInSch": StdInSch,
    "HomeAside": HomeAside
  },
  created () {

  },

  mounted () {
    this.$refs.temp.style.width = 12 + 'rem'
  },
  methods: {
    closeMenu () {

      this.isclose = !this.isclose
      // 折叠状态
      if (this.isclose) {
        this.$refs.mainbox.style.width = '100%'
        this.$refs.switch.innerHTML = `<i class="el-icon-s-fold"></i>`
        this.$refs.temp.style.width = 0 + 'rem'
      }
      else {
        // 展开状态
        this.$refs.mainbox.style.width = '90%'

        this.$refs.switch.innerHTML = `<i class='el-icon-s-unfold'></i>`

        this.$refs.temp.style.width = 12 + 'rem'

      }
    },
    //显示 在校||不在校
    changeIsInSchool (index) {
      if (index == 1) {
        this.$router.push({ name: 'StdInSch' })
      }
      else {
        // 跳转学生详情
        this.$router.push({
          name: "StudentDetail",
        })
      }
    }
  }

}
</script>

<style lang='less'  scoped>
.temp {
  width: 0rem;
  transition: all 0.5s linear;
  height: 800px;
}
.mainbox {
  width: 85%;
  transition: all 0.5s linear;
}
.el-header {
  padding: 0rem;
  height: 4rem;
  position: fixed;
  width: 100%;
  font-size: 1.2rem !important;
  height: 4rem !important;
  z-index: 2;
}
.el-aside {
  width: 11.5rem !important;
}
.bottom {
  margin-top: 4rem;
}

.tuichu {
  -webkit-animation: slide-out-left 0.5s linear both;
  animation: slide-out-left 0.5s linear both;
}

.jinru {
  -webkit-animation: slide-in-left 0.5s linear both;
  animation: slide-in-left 0.5s linear both;
}

/* 退出 */

@-webkit-keyframes slide-out-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-11.5rem);
    transform: translateX(-11.5rem);
    opacity: 0;
  }
}

@keyframes slide-out-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-11.5rem);
    transform: translateX(-11.5rem);
    opacity: 1;
  }
}

/* 进入 */

@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-11.5rem);
    transform: translateX(-11.5rem);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-11.5rem);
    transform: translateX(-11.5rem);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

.menubox {
  display: flex;
  margin-top: 0.25rem;
  position: fixed;
  height: 1000px;
  z-index: 2;
  justify-content: flex-start;
  background-color: #12012e;
  border-right: 0px solid #e5e5e5;
  .switchbox {
    display: flex;
    align-items: center;
    background-color: #e5e5e5;
    box-sizing: content-box;
    border: 0px solid transparent;
    .switch {
      height: 30px;
      background-color: #fff;
      display: flex;
      align-items: center;
      &:hover {
        background-color: #2d6dcc;
        cursor: pointer;
      }
    }
  }
}
/deep/ .mc-test-tag {
  min-width: 3rem !important;
}
</style>
